<template>
  <el-aside width="200px">
    <el-menu
      router
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-admin"
      default-active="2"
      text-color="#fff"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
    >
      <!-- 静态 模板 -->
      <el-sub-menu :index="'/' + item1.path" v-for="(item1, index) in menuData">
        <template #title>
          <el-icon><location /></el-icon>
          <span> {{ item1.authName }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            @click="selectMenu(item2, index)"
            :index="'/' + item2.path"
            v-for="(item2, index) in item1.children"
          >
            <el-icon><location /></el-icon>
            <span> {{ item2.authName }}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<script setup>
import { useStore } from 'vuex'

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  User,
} from '@element-plus/icons-vue'

import { getMenus } from '@/api/menu'
import { onMounted, ref } from 'vue'

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}

const props = defineProps(['isCollapse'])
const menuData = ref([])
const getAdminMenus = () => {
  getMenus().then((res) => {
    console.log(res.data)

    menuData.value = res.data
  })
}

onMounted(() => {
  getAdminMenus()
})

//  1  给左侧 侧边栏进行绑定点击事件
// 2   获取当前点击的菜单
// 3   存储当前点击的菜单
// 4   面包屑组件进行数据渲染

const store = useStore()

const selectMenu = (tags) => {
  // console.log(tags)
  tags.label = tags.authName

  tags.name = tags.path

  // tags.name = tags.path
  store.commit('selectMenu', tags)
}
</script>

<style lang="scss" scoped>
.el-aside {
  background-color: #545c64;
}

.el-menu-admin:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
